<template>
  <div class="avatar-list">
    <ul>
      <li v-for="item in items" class="avatar-item" :class="size ? 'avatar-item-'+ size : ''">
        <Tooltip :content="item.tip" placement="top">
          <Avatar icon="person" :src="item.src" />
        </Tooltip>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'AvatarList',
  props: {
    size: {
      type: String,
      default: 'default'
    },
    items: {
      type: Array
    }
  }
}

</script>
<style scoped>
.avatar-list {
  display: inline-block;
}

.avatar-list ul {
  display: inline-block;
  margin-left: 8px;
  font-size: 0
}

.avatar-item {
  display: inline-block;
  font-size: 14px;
  margin-left: -8px;
  width: 32px;
  height: 32px;
}

.avatar-item-large {
  width: 40px;
  height: 40px
}

.avatar-item-small {
  width: 24px;
  height: 24px
}

.avatar-item-mini {
  width: 20px;
  height: 20px;
}

</style>
<style>
.avatar-item .ivu-avatar {
  border: 1px solid #fff
}
.avatar-item.avatar-item-large .ivu-avatar{
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
}
.avatar-item.avatar-item-small .ivu-avatar {
  width: 24px;
  height: 24px;
  line-height: 24px;
}
.avatar-item.avatar-item-mini .ivu-avatar {
  width: 20px;
  height: 20px;
  line-height: 20px
}
</style>
